<template>
	<view>
		<topbar>
			<view class="flex-align flex-start ml50" :style="{ height: h + 'px' }"><view class="personalMessage" @click="back">个人信息</view></view>
		</topbar>

		<view class="" :style="{ 'padding-top': h + 'px' }"></view>

		<!-- tx -->
		<view class="mt12" style="position: relative;">
			<view class="flex-cen">
				<view class="">
					<u-modal title="请绑定手机号" :show="show8" :content="content" closeOnClickOverlay showCancelButton>
						<button slot="confirmButton" type="primary" open-type="getPhoneNumber" @error="err" @getphonenumber="getPhone">微信用户一键绑定</button>
					</u-modal>
				</view>
				<!-- 获取用户信息 -->
				<!-- .once -->
				<button class="flex-cen btnStyle" style="border-radius: 50%;" @click="getUserInfo">
					<image
						:src="
							userInfo.uavatar ||
								'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202107%2F19%2F20210719150601_4401e.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1682730586&t=db6f23641f28f027f33a717a9f2f5aa3'
						"
						mode=""
						style="width: 240rpx; height: 256rpx;border-radius: 50%;"
					></image>
				</button>
			</view>
			<image
				@click="$pub.go(`/pages_qrCode/qrCode/qrCode`)"
				src="/static/img/my/254.png"
				mode=""
				style="
          width: 50rpx;
          height: 50rpx;
          position: absolute;
          left: 470rpx;
          top: 210rpx;
        "
			></image>
		</view>
		<!-- xm -->
		<view class="mt30 flex-cen">
			<view class="name">{{ userInfo.unickName || '默认用户' }}</view>
		</view>
		<!-- <view class="" @click="back">bakc</view> -->
		<!-- time -->
		<!-- <view class="flex-cen"><view class="time">1994-12-03 男</view></view> -->
		<!-- note -->
		<!-- <view class="mt28 flex-cen"><view class="note">签名：喜欢玩游戏，旅游，电影等等</view></view> -->
		<!-- group -->
		<view class="mt56 group flex-around">
			<view class="flex-column">
				<view class="num mt22">{{ groupNumber || 10 }}</view>
				<view class="flex-cen mt6">
					<view class="mr4 numWord">圈子</view>
					<image class="mt6" src="/static/img/my/baseline-lock_open-24px.png" mode="" style="width: 23rpx; height: 23rpx;"></image>
				</view>
			</view>
			<view class="flex-column">
				<view class="num mt22">{{ friendNumber || 10 }}</view>
				<view class="flex-cen mt6">
					<view class="mr4 numWord">朋友</view>
					<image class="mt6" src="/static/img/my/baseline-lock-24px.png" mode="" style="width: 23rpx; height: 23rpx;"></image>
				</view>
			</view>
		</view>
		<!-- camera -->
		<view class="mt14">
			<view class="flex-between mr30 ml32">
				<view class="title">圈本</view>
				<!-- <view class=""><image src="/static/img/my/baseline-camera_enhance-24px.png" mode="" style="width: 48rpx;height: 48rpx;"></image></view> -->
			</view>
		</view>
		<!-- image -->
		<view class="mt10 mr30 ml32">
			<view class="">
				<image src="https://img2.baidu.com/it/u=159831690,566845036&fm=253&fmt=auto&app=138&f=JPEG?w=600&h=400" mode="" style="width: 688rpx; height: 372rpx;"></image>
			</view>
			<!-- icons -->
			<view class="mt42 ml28 mr262">
				<view class="flex-cen" style="justify-content: space-between;">
					<view class="">
						<view class="flex-cen">
							<image class="mr10" src="/static/img/my/17.png" mode="" style="width: 43rpx; height: 35rpx;"></image>
							<view class="ioncs">5K</view>
						</view>
					</view>
					<view class="">
						<view class="flex-cen">
							<image class="mr12" src="/static/img/my//16.png" mode="" style="width: 39rpx; height: 38rpx;"></image>
							<view class="ioncs">1K</view>
						</view>
					</view>
					<view class="">
						<view class="flex-cen">
							<image class="mr12" src="/static/img/my/15.png" mode="" style="width: 46rpx; height: 37rpx;"></image>
							<view class="ioncs">22K</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- line -->
		<view class="" style="height: 150rpx;"></view>

		<!--  -->
		<!-- <navBar></navBar> -->
		<!-- <view-tabbar :current="0"></view-tabbar> -->
		<!-- <tabbar></tabbar> -->
	</view>
</template>

<script>
// import Tabbar from '@/components/tabbar/tabbar.vue';
import { systemInfo } from '@/mixin.js';

import { setUserInfo } from '@/utils/auth.js';
import {
	mapState, //先导入mapState方法
	mapMutations,
	mapActions
} from 'vuex';

let phoneNumber = '';
let rawData = '';
let signature = '';
export default {
	mixins: [systemInfo],
	data() {
		return {
			h: 0,
			isShow: true,
			userName: '',
			pic: '',
			phoneCode: '',
			phoneNumber: '',
			groupNumber: '',
			friendNumber: '',
			h: 60,
			showModal: false,
			show8: false,

			/* websocket */
			isSuccess: false,
			timer: '',
			isClose: false,
			sendMessage: {}
		};
	},
	mounted() {
		this.h = this.$navHeight;
		// this.getUserInfo();
	},
	computed: {
		...mapState('user', ['userInfo'])
	},
	methods: {
		...mapActions('user', ['getGroupnumber', 'getFriendnumber']),
		async wxGetPhone(code) {
			try {
				let phoneRe = await this.$API.authApi.wxGetPhone(this.phoneCode);
				console.log(phoneRe, 'phoneRe');
				if (phoneRe.errcode === 40001) {
					uni.showToast({
						title: phoneRe.errmsg
					});
				}
				this.phoneNumber = phoneRe?.phone_info?.phoneNumber;
				console.log(this.phoneNumber, 'this.phoneNumber');
				return phoneRe;
			} catch (e) {
				if (e.errcode === 40001) {
					uni.showToast({
						title: e.errmsg
					});
				}
				this.show8 = !this.show8;
				console.log(e, 'e');
			}
		},

		async getUserInfo(code) {
			try {
				let re = await this.$API.userApi.getUserInfo();
				console.log(re, 're');
				return re;
			} catch (e) {
				this.show8 = !this.show8;
				console.log(e, 'e');
			}
		},
		async wxLogin(data) {
			try {
				let re = await this.$API.authApi.wxLogin(data);
				/*  */
				console.log(re, 're');
				return re;
			} catch (e) {
				this.show8 = !this.show8;
				console.log(e, 'e');
			}
		},

		async getPhone(e) {
			var that = this;
			let token = null;
			this.phoneCode = e.detail.code;
			/* 先获取手机号 */
			let phoneRe = await this.wxGetPhone(e.detail.code);
			console.log(phoneRe, 'phoneRe');
			if (phoneRe.errcode === 40001) {
				uni.showToast({
					title: e.errmsg
				});
			}
			phoneNumber = phoneRe.phone_info?.phoneNumber;
			console.log(phoneNumber, 'phoneNumberphoneNumber');
			/* 在授权登录 */
			uni.login({
				// 登录,拿code
				// 微信接口服务器需要通过code换取 openid、unionid、session_key 等信息
				provider: 'weixin',
				success: function(loginRes) {
					console.log(that.phoneNumber, 'that.phoneNumber');
					console.log(that, 'that');
					/* vuex 保存token */
					that.$store
						.dispatch('user/wxLogin', {
							code: loginRes.code,
							rawData: rawData,
							signature: signature,
							phoneNumber: phoneNumber
						})
						.then(result => {
							// 登陆成功的结果
							console.log(result, 'token');
							/* 获取用户消息 */
							that.$store.dispatch('user/wxGetUserInfo').then(result => {
								// 登陆成功的结果
								console.log(result, 'userIinfo');
								/* 保存用户信息 */
								setUserInfo(result);
								/* 保存数量 */
								that.getFriendnumber();
								that.getGroupnumber();
								// that.$store.dispatch('user/setUserInfoAction', result);
								let token = uni.getStorageSync('token');
								let url = `wss://api.imquanzi.com/ws?token=${token}`;
								/* 连接websocket */
								that.$store.dispatch('websocket/WEBSOCKET_INIT', url);
							});
						});
					/*  */
				}
			});
			/* 关闭弹窗 */
			this.show8 = !this.show8;
		},
		//更新用户消息
		updataUserInfo() {
			console.log('更新用户');
			let userInfo = uni.getStorageSync('userInfo');
			this.groupNumber = userInfo.groupNumber;
			this.friendNumber = userInfo.friendNumber;
		},
		back() {
			if (!uni.getStorageSync('token')) return;
			uni.switchTab({
				url: '/pages/index/index'
			});
		},
		// 获取微信用户信息,一键登录
		getUserInfo() {
			console.log('getUserInfogetUserInfo');
			var that = this;
			let token = null;
			//禁止二次登录
			uni.getUserProfile({
				// 获取微信用户的基本信息
				desc: '注册用户信息使用',
				lang: 'zh_CN',
				success: res => {
					that.show8 = !that.show8;
					console.log('微信原信息', res);
					rawData = res.rawData;
					signature = res.signature;
					that.userName = res.userInfo.nickName; // 拿到用户昵称
					that.pic = res.userInfo.avatarUrl; // 用户头像
				},
				fail: res => {
					uni.showToast({
						title: '微信获取用户信息失败'
					});
				},
				complete: res => {
					console.log(res, '获取用户信息接口最后');
				}
			});
		},
		/* webSocket */
		connectSocket() {
			let that = this;
			let token = uni.getStorageSync('token') || 'c2FiZXI6c2FiZXJfc2VjcmV0';
			this.WebSocket = uni.connectSocket({
				url: `wss://api.imquanzi.com/ws?token=${token}`,
				success(res) {
					console.log('websocket连接成功');
					that.isSuccess = true;
				},
				fail(err) {
					console.log('报错', err);
				}
			});
			this.WebSocket.onOpen(function(res) {
				// let that = this;
				console.log('WebSocket连接已打开！');
				that.isSuccess = true;
				// that.getStatus();
				that.heart();
			});
			this.WebSocket.onMessage(function(res) {
				console.log('收到服务器内容：' + res.data);
				that.handlerMsg(JSON.parse(res.data)); //这里是对获取到的数据进行操作
			});
			this.WebSocket.onError(function(res) {
				// debugger;
				console.log('WebSocket连接打开失败，请检查！');
				console.log(res);
				this.isSuccess = false;
				that.connectSocket();
				//进入重新连接
				that.reconnect();
			});
			// // 监听连接关闭 -
			this.WebSocket.onClose(e => {
				console.log('WebSocket连接关闭！');
				clearInterval(that.timer);
				that.timer = '';
				if (!that.isClose) {
					that.reconnect();
				}
			});
			console.log(this.WebSocket, 'WebSocket对象');
		},
		//进入重新连接
		reconnect() {
			console.log('进入断线重连');
			// this.socketTask.close();
			this.WebSocket = null;
			this.connectSocket();
		}
	},
	onShow() {
		/* 更新 */
		this.updataUserInfo();
		this.h = getApp().globalData.systemHeight;
		uni.hideTabBar({
			animation: false
		});
		/* 连接 */
		// this.connectSocket();
	}
};
</script>

<style lang="scss" scoped>
.btnStyle {
	width: 240rpx;
	height: 256rpx;
	border-radius: 50%;
	padding: 0rpx;
}

.flex-evenly1 {
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	margin-left: 50rpx;
	margin-right: 30rpx;
	justify-content: space-between;
}

.flex-column {
	height: 100%;
}

.personalMessage {
	// width: 192rpx;
	// height: 66rpx;
	font-size: 48rpx;
	font-family: PingFang SC-Medium, PingFang SC;
	font-weight: 500;
	color: #1b1b1b;
	line-height: 0rpx;
	// -webkit-background-clip: text;
	// -webkit-text-fill-color: transparent;
}

.name {
	// width: 84rpx;
	// height: 58rpx;
	font-size: 42rpx;
	font-family: PingFang SC-Bold, PingFang SC;
	font-weight: bold;
	color: #1b1b1b;
	line-height: 54rpx;
	-webkit-background-clip: text;
	// -webkit-text-fill-color: transparent;
}

.time {
	// width: 222rpx;
	// height: 40rpx;
	font-size: 29rpx;
	font-family: PingFang SC-Regular, PingFang SC;
	font-weight: 400;
	color: #c6c6c6;
	line-height: 54rpx;
	-webkit-background-clip: text;
	// -webkit-text-fill-color: transparent;
}

.note {
	// width: 668rpx;
	// height: 140rpx;
	font-size: 20rpx;
	font-family: PingFang SC-Regular, PingFang SC;
	font-weight: 400;
	color: #989898;
	line-height: 0rpx;
	-webkit-background-clip: text;
	// -webkit-text-fill-color: transparent;
}

.group {
	width: 604rpx;
	height: 142rpx;
	background: #ffffff;
	box-shadow: 0rpx 6rpx 72rpx 2rpx rgba(0, 0, 0, 0.09);
	border-radius: 30rpx 30rpx 30rpx 30rpx;
	opacity: 1;
	margin-right: 64rpx;
	margin-left: 82rpx;

	.num {
		padding-left: 10rpx;
		// text-align: center;
		// width: 72rpx;
		// height: 50rpx;
		font-size: 40rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #1b1b1b;
		// line-height: 0rpx;
		-webkit-background-clip: text;
		// -webkit-text-fill-color: transparent;
	}

	.numWord {
		// width: 52rpx;
		// height: 36rpx;
		font-size: 26rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #7a8fa6;
		// line-height: 0rpx;
		-webkit-background-clip: text;
		// -webkit-text-fill-color: transparent;
	}
}

.title {
	// width: 84rpx;
	// height: 58rpx;
	font-size: 42rpx;
	font-family: PingFang SC-Bold, PingFang SC;
	font-weight: bold;
	color: #1b1b1b;
	line-height: 54rpx;
	-webkit-background-clip: text;
	// -webkit-text-fill-color: transparent;
}

.ioncs {
	// width: 26rpx;
	// height: 32rpx;
	font-size: 24rpx;
	font-family: Poppins-SemiBold, Poppins;
	font-weight: 600;
	color: #c4c4c4;
	// line-height: 0rpx;
	-webkit-background-clip: text;
	// -webkit-text-fill-color: transparent;
}
</style>
